<template>
  <div class="register">
    <x-header>注册</x-header>
    <div class="img-box">
      <x-img :src="src" :webp-src="`${src}?type=webp`" class="ximg-demo" :offset="-100" container="#vux_view_box_body"></x-img>
      <avatar class="avatar" username="Lairenna" src="" :size="80"></avatar>
    </div>
    <group>
      <x-input ref="phoneValid" autocomplete="off" v-model="phone" title="手机号" name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile">
        <i class="icon-zhucedenglushoujihao register-icon" slot="label" style="padding-right:10px;display:block;"></i>
      </x-input>
      <x-input autocomplete="off" v-model="code" title="验证码" class="weui-vcode" placeholder="请输入验证码">
        <i class="icon-yanzhengma register-icon" slot="label" style="padding-right:10px;display:block;"></i>
        <span slot="right" v-if="sendMsgDisabled">{{`${time}s`}}</span>
        <x-button class="sendcode-btn" slot="right" type="primary" mini v-else @click.native="handleValidateCode">获取验证码</x-button>
      </x-input>
      <x-input autocomplete="new-password" title="密 码" type="password" v-model="password" placeholder="请输入密码">
        <i class="icon-zhucedenglumima register-icon" slot="label" style="padding-right:10px;display:block;"></i>
      </x-input>
    </group>
    <div class="btn-box">
      <span style="background:#EFA79B;color:#ffffff;" class="get-code register-btn" @click="handleRegister">注册</span>
    </div>
    <div class="foot">
      <check-icon style="font-size:12px;" :value.sync="isRead">我已阅读并同意</check-icon>
      <span @click="$router.push('/agreement')" style="color:#526a75;font-size:12px;">服务协议</span>
    </div>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import { XButton, XInput, Group, XImg, XHeader, CheckIcon } from 'vux';
import Avatar from 'vue-avatar';
const IndexStore = namespace('login');
const MineStore = namespace('mine');

@Component({
  components: { XButton, XInput, Group, XImg, Avatar, XHeader, CheckIcon }
})
export default class Register extends Vue {
  @IndexStore.Action getRegister
  @IndexStore.Action getValidateCode
  @MineStore.Action getMyLikePosts
  @MineStore.Action getMyWatch
  @IndexStore.State register
  @IndexStore.State validateCode
  src = 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg'
  phone = ''
  code = ''
  password = ''
  time = 60
  isRead = false
  password = ''
  sendMsgDisabled = false
  send () {
    this.sendMsgDisabled = true
    let interval = window.setInterval(() => {
      if ((this.time--) <= 0) {
        this.time = 60
        this.sendMsgDisabled = false
        window.clearInterval(interval)
      }
    }, 1000)
  }
  handleValidateCode () {
    let flag = true
    const phoneValid = this.$refs.phoneValid.valid
    if (!phoneValid) {
      flag = false
      this.$vux.toast.text('手机号码格式不正确', 'middle')
    }
    if (!this.phone) {
      flag = false
      this.$vux.toast.text('请输入手机号码', 'middle')
    }
    if (flag) {
      const params = {
        tel: this.phone
      }
      this.getValidateCode(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.send()
          this.$vux.toast.text('获取验证码成功', 'middle');
          this.code = ''
        }
      })
    }
  }
  handleRegister () {
    let flag = true
    const phoneValid = this.$refs.phoneValid.valid
    if (!this.isRead) {
      flag = false
      this.$vux.toast.text('请阅读并同意使用条款', 'middle')
    }
    if (!this.password) {
      flag = false
      this.$vux.toast.text('请输入密码', 'middle')
    }
    if (!this.code) {
      flag = false
      this.$vux.toast.text('请输入验证码', 'middle')
    }
    if (!phoneValid) {
      flag = false
      this.$vux.toast.text('手机号码格式不正确', 'middle')
    }
    if (!this.phone) {
      flag = false
      this.$vux.toast.text('请输入手机号码', 'middle')
    }
    if (flag) {
      const params = {
        tel: this.phone,
        passwd: this.password,
        code: this.code
      }
      this.getRegister(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('注册成功', 'middle');
          localStorage.setItem('loginInfo', JSON.stringify(this.register))
          this.getMyLikePosts()
          this.getMyWatch()
          this.$router.push({
            path: '/personinfo'
          })
        }
      })
    }
  }
}
</script>
<style lang="less">
  .register {
    background: #ffffff;
    height: 100%;
    width: 100%;
    padding-top: 46px;
    .weui-icon-circle {
      font-size: 18px;
      padding-bottom: 2px;
    }
    .sendcode-btn {
      background-color: #ffffff;
      color: #999999;
      line-height: 28px !important;
    }
    .sendcode-btn:after {
      border-radius: 30px;
      border-color: rgb(239, 167, 155);
    }
    .register-icon {
      font-size: 24px;
      padding-left: 10px;
    }
    .foot {
      display: flex;
      align-items: center;
      justify-content: space-around;
      // font-size: 12px;
    }
    .btn-box {
      margin: 30px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .register-btn {
      border-radius: 40px;
      padding: 6px 40%;
      font-size: 14px;
    }
    .code-box {
      .weui-cell__ft {
        display: flex;
        align-items: center;
      }
    }
    .code {
      width: 120px;
    }
    .img-box {
      margin-bottom: 80px;
      position: relative;
      .avatar {
        position: absolute;
        bottom: -50px;
        left: 50%;
        margin-left: -40px;
      }
    }
    .ximg-demo {
      width: 100%;
      height: 180px;
    }
  }
</style>
